<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" http-equiv="Access-Control-Allow-Origin" content="*" />
<title>在线客服控制台</title>

<link rel="stylesheet" type="text/css" th:href="@{/static/webSocket/css/pure/tables-min.css}">
<script th:src="@{/static/webSocket/js/jquery/jquery-3.2.1.min.js}"></script>
<script th:src="@{/static/webSocket/js/socket.js}"></script>
<script th:src="@{/static/webSocket/js/page/index.js}"></script>

</head>

<script type="text/javascript">
	
</script>


<body>

	<div style="margin: 20px 50px 10px 50px;">
	
		<div style="text-align: center;"><h2>OnlineCustomerService 监控</h2></div>
	
		<div style="border-bottom: 1px solid #cccccc;">
			<h3>系统:</h3>
			<span>启动时间：<span th:text="${data.starupTime}"></span></span>；
			<span>运行时间：<span th:text="${data.survivalTime}"></span></span>；
			<span>总客服：<span th:text="${data.totalCustomer}"></span></span>；
			<span>总客户：<span th:text="${data.totalConsumer}"></span></span>；
		</div>
		
		
		<div>
			<h3>客服:</h3>
			在线数：<span style="font-weight: 600;"><span th:text="${data.onlineCustomer}"></span></span>
		</div>
		<table class="pure-table" style="width: 100%;">
		    <thead>
		        <tr>
		            <th width="80px;">session Id</th>
		            <th>上线时间</th>
		            <th>当前号码</th>
		            <th>客户总数</th>
		            <th>持续时间</th>
		        </tr>
		    </thead>
		
		    <tbody>
		        <tr th:each="customer,status:${data.customerList}">
		            <td th:text="${customer.session.id}"></td>
		            <td th:text="${customer.onlineTime}"></td>
		            <td th:text="${customer.int_currentNumber}"></td>
		            <td th:text="${customer.int_totalNumber}"></td>
		            <td th:text="${customer.durationTime}"></td>
		        </tr>
		    </tbody>
		</table>
		<br>
		<br>
		
		<div>
			<h3>客户:</h3>
			在线数：<span style="font-weight: 600;"><span th:text="${data.onlineConsumer}"></span></span>
		</div>
		<table class="pure-table" style="width: 100%;">
		    <thead>
		        <tr>
		            <th width="80px;">session Id</th>
		            <th>上线时间</th>
		            <th>客户会话id</th>
		            <th>咨询时间</th>
		            <th>操作</th>
		        </tr>
		    </thead>
		
		    <tbody>
		        <tr th:each="consumer,status:${data.consumerList}">
		         	<td th:text="${consumer.session.id}"></td>
		         	<td th:text="${consumer.onlineTime}"></td>
		         	<td th:text="${consumer.customerSessionId}"></td>
		         	<td th:text="${consumer.durationTime}"></td>
		            <td><button>offline</button> <button>transfer</button></td>
		        </tr>
		    </tbody>
		</table>
		<br>
		<br>
		
		<div style="border-bottom: 1px solid #cccccc;padding-bottom: 10px;">
			<h3>设置：</h3>
			广告：
				<button id="ad" onclick="_index.CloseAd();">
					<font th:if="${data.isAdReply} eq true">关闭广告</font>
					<font th:if="${data.isAdReply} eq false">打开广告</font>
				</button> 
				<button onclick="_index.setInfo(1);">设置广告</button>；
			自动回复：
				<button id="auto" onclick="_index.CloseAuto();">
					<font th:if="${data.isAutoReply} eq true">关闭回复</font>
					<font th:if="${data.isAutoReply} eq false">打开回复</font>
				</button>
				<button onclick="_index.setInfo(2);">设置回复</button>
		</div>
	</div>

</body>
</html>